<template>
  <div class="notice-detail-container">
    <div v-if="data.selectedRow" class="notice-detail" >
      <h1 style="text-align: center">{{ data.selectedRow.title }}</h1>
      <div style="margin-top: 15px; color: #666666; text-align: center">
        <span style="margin-left: 30px">发布人：{{ data.selectedRow.createdByUsername }}</span>
        <span style="margin-left: 30px"
              v-if="data.selectedRow.createdByUsername !== data.selectedRow.updatedByUsername">
            最后修改人：{{ data.selectedRow.updatedByUsername }}
          </span>
        <span style="margin-left: 30px">发布时间：{{ data.selectedRow.time }}</span>
        <span style="margin-left: 30px" v-if="data.selectedRow.updatedTime !== data.selectedRow.time">
            最后修改时间：{{ data.selectedRow.updatedTime }}<br/>
          </span>
      </div>
      <hr class="divider">
      <div class="content" v-html="data.selectedRow.content"></div>
      <span style="margin-left: 30px">备注：{{ data.selectedRow.remark }}</span>
    </div>
    <div v-else class="loading">
      加载中...
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {useRoute} from 'vue-router';

const route = useRoute();

const data = reactive({
  id: route.query.id,
  selectedRow: null,
});

const load = () => {
  if (!data.id) {
    ElMessage.error("公告ID缺失");
    return;
  }

  request.get(`/notice/selectById/${data.id}`).then(res => {
    if (res.code === '200') {
      data.selectedRow = res.data;
      console.log('Selected Row:', data.selectedRow); // 添加调试信息
    } else {
      ElMessage.error(res.msg);
    }
  }).catch(err => {
    console.error("Error fetching notice details:", err);
    ElMessage.error("获取公告详情失败，请稍后再试");
  });
};

const formattedDate = (dateString) => {
  const options = {year: 'numeric', month: 'long', day: 'numeric'};
  return new Date(dateString).toLocaleDateString(undefined, options);
};

onMounted(() => {
  load();
});
</script>

<style scoped>
.notice-detail-container {
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 20px auto;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
}

.notice-detail h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 15px;
}

.meta-info p {
  font-size: 16px;
  color: #777;
  margin: 5px 0;
}

.divider {
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

.content {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.loading {
  text-align: center;
  font-size: 18px;
  color: #777;
  margin-top: 20px;
}
</style>



